<template>
    <div class="login-container">
        <div class="login-title">密号(复机)</div>
        <div class="login-input">
            
            <form @submit="toLogin">
                <input type="password" placeholder="水果罐头" v-model="ans" >
            </form>
        </div>
        <p class="login-btn" @click="toLogin" @keydown.enter="toLogin">
            Dial
        </p>
    </div>
</template>

<script>
import { login } from '../Api'
import { error, success } from '../utils/log'
export default {
    data() {
        return {
            ans: "",
        }
    },
    methods: {
        toLogin(e) {
            let params = {}
            params.ans = this.ans
            login(params).then(res => {
                if (res.data.pass) {
                    this.to('/manage')
                } else {
                    this.ans = ""
                    error("答案错误")
                }
            }).catch(err => {
                error(err)
            })
            e.preventDefault();
        },
        to(path) {
            this.$router.push(path)
        }
    }
}
</script>

<style lang="less" scoped>
    .login-container {
        margin-top: 150px;
        text-align: center;
        .login-title {
            font-family: 'xingkai';
            font-size: 20px;
        }
        .login-input {
            margin-top: 30px;
            input {
                background: @dark_login_input;
                outline: none;
            }
        }
        .login-btn {
            background: none;
            font-family: 'xingkai';
            font-size: 20px;
            margin-top: 20px;
            text-decoration: underline;
        }
        .login-btn:hover {
            cursor: pointer;
        }
    }

</style>